<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab切换测试</title>
    <style>
        .nav-tab {
            padding: 10px 20px;
            margin: 5px;
            border: 1px solid #ccc;
            background: #f5f5f5;
            cursor: pointer;
            border-radius: 4px;
        }
        .nav-tab.active {
            background: #007bff;
            color: white;
        }
        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid #ccc;
            margin-top: 10px;
        }
        .tab-content.active {
            display: block;
        }
    </style>
</head>
<body>
    <h1>Tab切换测试</h1>
    
    <nav>
        <button class="nav-tab active" onclick="switchTab('dashboard')">仪表板</button>
        <button class="nav-tab" onclick="switchTab('subscriptions')">订阅管理</button>
        <button class="nav-tab" onclick="switchTab('servers')">服务器管理</button>
    </nav>
    
    <div id="dashboard-tab" class="tab-content active">
        <h2>仪表板内容</h2>
        <p>这是仪表板的内容</p>
    </div>
    
    <div id="subscriptions-tab" class="tab-content">
        <h2>订阅管理内容</h2>
        <p>这是订阅管理的内容</p>
    </div>
    
    <div id="servers-tab" class="tab-content">
        <h2>服务器管理内容</h2>
        <p>这是服务器管理的内容</p>
    </div>
    
    <script>
        function switchTab(tabName) {
            console.log('切换标签页到:', tabName);
            
            // 隐藏所有标签页
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 移除所有标签按钮的激活状态
            document.querySelectorAll('.nav-tab').forEach(btn => {
                btn.classList.remove('active');
            });
            
            // 显示目标标签页
            const targetTab = document.getElementById(`${tabName}-tab`);
            if (targetTab) {
                targetTab.classList.add('active');
            }
            
            // 激活对应的标签按钮
            const targetBtn = document.querySelector(`[onclick="switchTab('${tabName}')"]`);
            if (targetBtn) {
                targetBtn.classList.add('active');
            }
        }
    </script>
</body>
</html>



